<template>
  <div class="header">
    <div class="header-left">
      <button class="back-level" v-if="!mapControlSelect" @click="backLevel"></button>
    </div>
    <div class="header-center">
      <router-link class="router-link" to="/" :class="{ active: !mapControlSelect }">
        数据总览
      </router-link>
      <span>{{ userInfo?.subjectName }}</span>
      <router-link class="router-link" to="/map-control" :class="{ active: mapControlSelect }">地图控制
      </router-link>
    </div>
    <div class="header-right">
      <span class="clock">{{ time.substring(10) }}</span>
      <span class="week-date">
        <span class="week">{{weather.week}}</span>
        <span>{{time.substring(0,10).replace(new RegExp('-','g'),"/")}}</span>
      </span>
      <span class="temper">{{ weather.temp }}℃</span>
      <span @click="toggelStatus" v-if="mapControlSelect" class="alarmAndWarn">
        <audio ref="audio" autoplay :src="audioSrc" loop></audio>
        <template>
          <img class="bell" src="./image/06.png" v-if="alarmNum==0" alt="" width="30">
          <img class="bg" src="./image/warn.gif" v-if="alarmNum!=0 && !redFlag" alt="">
          <img class="bg" src="./image/alarm.gif" v-if="alarmNum!=0 && redFlag" alt="">
          <img class="bell" src="./image/06.png" v-if="alarmNum!=0 && !redFlag" alt="" width="30">
          <img class="bell" src="./image/red-bell.png" v-if="alarmNum!=0 && redFlag" alt=""
            width="24">
        </template>
      </span>
      <template v-if="mapControlSelect">
        <span v-if="alarmNum!=0 && redFlag" style="position: relative;top: 0.4vh;right: 1.5vw;"
          class="red">{{alarmNum>0?`（${alarmNum}）`:''}}</span>
        <span v-else
          style="color: #f98d2b;position:relative;top:0.4vh;right: 1vw;">{{ alarmNum > 0 ? `（${alarmNum}）` : "" }}</span>
      </template>
      <span class="expend" @click="screen" :class="{ open: screenExpend }"></span>
    </div>
  </div>
</template>
<script lang="ts">
import { ref, defineComponent } from "vue"
import screenfull from "screenfull"
export default defineComponent({
  name: "Nav",
  props: {
    mapControlSelect: {
      //地图控制页面标志
      type: Boolean,
      require: true,
    },
  },
  data() {
    return {
      userInfo: JSON.parse(localStorage.getItem("qwt-wy-userInfo") || ""),
      timer: NaN,
      isFullscreen: false,
      time: "",
      audioFlag: false,
      audioSrc: "",
      redFlag: false,
      weather: {
        week:'星期日',
        temp:'18-25'
      },
      screenExpend: false,
      alarmNum: NaN,
    }
  },
  setup() {},
  methods: {
    backLevel() {},
    getWeek() {
      //获取星期
      let date = new Date()
      const week = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ]
      const w = week[date.getDay()]
      return `${w}`
    },
    getTime() {
      //获取日期
      const now = new Date()
      const Y = now.getFullYear()
      const M =
        now.getMonth() + 1 < 10
          ? "0" + (now.getMonth() + 1)
          : now.getMonth() + 1
      const D = now.getDate() < 10 ? "0" + now.getDate() : now.getDate()
      const H = now.getHours() < 10 ? "0" + now.getHours() : now.getHours()
      const min =
        now.getMinutes() < 10 ? "0" + now.getMinutes() : now.getMinutes()
      const s =
        now.getSeconds() < 10 ? "0" + now.getSeconds() : now.getSeconds()
      return `${Y}-${M}-${D} ${H}:${min}:${s}`
    },
    screen() {
      this.screenExpend = !this.screenExpend
      if (screenfull.isEnabled) {
        screenfull.toggle()
      }
    },
    toggelStatus() {//警报开关

    },
  },
  mounted() {
    this.timer = setInterval(() => {
      this.time = this.getTime()
    }, 1000)
    console.log(this.$router)
  },
})
</script>
<style scoped lang="scss">
.header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 84px;
  display: flex;
  flex-flow: row nowrap;
  font-size: 14px;
  color: #fff;
  justify-content: space-between;
  align-items: center;
  background: url("./image/00.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  .header-left {
    display: flex;
    width: 26.5vw;
    margin-left: 16px;
    .back-level {
      width: 24px;
      height: 24px;
      margin-right: 16px;
      outline: none;
      border: none;
      vertical-align: middle;
      background: url("./image/011.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
  }
  .header-center {
    width: 47vw;
    display: flex;
    justify-content: space-between;
    padding: 0 1.5vw;
    span {
      position: relative;
      top: -1vh;
      height: 28px;
      font-size: 26px;
      font-weight: 400;
      color: #fefeff;
    }
    .router-link:last-child {
      // width: 128px;
      // height: 50px;
      padding: 12px 37px;
      font-size: 14px;
      vertical-align: super;
      background: url("./image/09.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    .router-link:first-child {
      // width: 128px;
      // height: 50px;
      padding: 12px 37px;
      font-size: 14px;
      vertical-align: super;
      background: url("./image/08.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    .router-link:first-child.active {
      background: url("./image/02.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    .router-link:last-child.active {
      background: url("./image/01.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
  }
  .header-right {
    width: 26.5vw;
    // height: 9.89vh;
    margin-right: 16px;
    // margin-top:10px;
    text-align: right;
    .clock {
      margin-right: 8px;
      font-size: 28px;
      vertical-align: middle;
      color: rgba($color: #fff, $alpha: 0.85);
    }
    .week-date {
      display: inline-flex;
      flex-flow: column nowrap;
      font-size: 14px;
      text-align: left;
      vertical-align: middle;
      color: rgba($color: #fff, $alpha: 0.65);
    }
    .weather {
      width: 39px;
      height: 30px;
      margin-right: 10px;
      vertical-align: middle;
      vertical-align: baseline;
    }
    .temper {
      position: relative;
      top: 1vh;
      border-left: 1px solid rgba(251, 251, 251, 0.2);
      border-right: 1px solid rgba(251, 251, 251, 0.2);

      padding-left: 10px;
      padding-right: 10px;
      margin-left: 10px;
      font-size: 16px;
      color: rgba($color: #fff, $alpha: 0.85);
    }
    .alarmAndWarn {
      cursor: pointer;
      position: relative;
      top: 1.42vh;
      width: 60px;
      // height: 40px;
      display: inline-block;
      margin-left: 20px;
      background-size: 100% 100%;
      .bell {
        position: absolute;
        left: 0vw;
        top: -28px;
      }
      .bg {
        position: absolute;
        width: 85px;
        height: 40px;
        right: -22px;
        top: -36px;
      }
    }
    .expend {
      display: inline-block;
      position: relative;
      top: 0.8vh;
      width: 20px;
      height: 20px;
      margin-left: 16px;
      cursor: pointer;
      background: url("./image/010.png") no-repeat;
      background-size: 100% 100%;
    }
    .expend.open {
      background: url("./image/07.png") no-repeat;
      background-size: 100% 100%;
    }
  }
}
</style>